<template>
    <view class="page">
        <view class="info-form">
            <view class="item" @click="updateAvatar">
                <text>头像</text>
                <view class="right">
                    <image :src="user_pic" mode="" v-if="user_pic" />
                    <image src="../../static/logo.png" style="height: 30px; width: 30px;" mode="" v-else />
                    <text>></text>
                </view>
            </view>
            <view class="item">
                <text>名字</text>
				<view class="right">
					<input type="text"  v-model="nick_name" placeholder="ll" maxlength="8"/>
				</view>
            </view>
            <view class="item">
                <text>手机号</text>
				<view class="right">
					<input type="text" v-model="phoneNum" maxlength="11"/>
				</view>
            </view>
        </view>
        <view class="ad-form">
            <view class="form-title">
                <span class="iconfont icon-dizhi"></span><p>我的地址</p>
            </view>
            <view class="form-title">
                <span class="iconfont icon-mima"></span><p>修改密码</p>
            </view>
        </view>
        <view class="myset-btn" @click="changeInfo">
        		        保存修改
         </view>
    </view>
</template>

<script>
    import {updateUser} from "../../api/index"
    export default {
        data() {
            return {
                user_pic:'',
                nick_name:"",
                phoneNum:"",
                userId:""
            }
        },
        created(){
            //进入页面 先到本地存储中获取一次用户名 手机号 头像
            const user = uni.getStorageSync('userInfo')
            this.nick_name = user.nick_name,
            this.phoneNum = user.phoneNum,
            this.user_pic = user.user_pic,
            this.userId = user.id
        },
        methods: {
            //保存修改
            changeInfo(){
                updateUser({id:this.userId,nick_name:this.nick_name,user_pic:this.user_pic,phoneNum:this.phoneNum})
                .then(res=>{
                    if(res.data.statis === 0){
                        //保存修改成功后提示修改成功
                        uni.showToast({
                            title:"修改成功"
                        })
                        let info = uni.getStorageSync("userInfo")
                        //保存最新数据到本地
                        let userInfo = {...info,id:this.userId,nick_name:this.nick_name,user_pic:this.user_pic,phoneNum:this.phoneNum}
                        uni.setStorageSync("userInfo",userInfo)
                    }
                    console.log(res,111);
                })
            },
            //修改头像
            updateAvatar(){
                //选择图片
                uni.chooseMessageFile({
                    count:1,
                    type:"image",
                    success:(res=>{
                        console.log(res,"选择的那个东西");
                        let imageUrl = res.tempFiles[0].path
                        console.log(imageUrl);
                        //上传图片临时地址到服务器
                        uni.uploadFile({
                            url:"http://8.140.198.52:8001/common/uploadFile",
                            filePath:imageUrl,
                            name:"file",
                            header:{
                                "Authorization":uni.getStorageSync("token"),
                                'content-type':'multipart/form-data',
                            },
                            success:(res)=>{
                                console.log(res,"图片在服务器上的地址");
                                this.user_pic = res.data
                            }
                            
                        })
                    })
                })
            }
            
        },
    }
</script>

<style lang="scss" scoped>
    .page{
        background-color: #e1e1e1;
        width: 100%;
        height: 100vh;
        .info-form{
            width: 100%;
            height: 400rpx;
            background-color: #fff;
            .item{
                width: 90%;
                margin: auto;
                display: flex;
                height: 120rpx;
                border-bottom: 1px solid #ccc;
                text{
                    margin: auto 10rpx;
                    font-size: 30rpx;
                }
                .right{
                    image{
                        width: 80rpx;
                        height: 80rpx;
                    }
                    
                    margin: auto;
                    // padding-left: 400rpx;
					// display: inline; 
					float: right;
                    justify-content: flex-end;
                }
                .g{
                    color: #8d8d8d;
                }
            }
            .form-item{
                width: 90%;
                margin: auto;
                display: flex;
                height: 100rpx;
                border-bottom: 1px solid #ccc;
                p{
                    margin: auto 10rpx;
                    font-size: 30rpx;
                }
                input{
                    margin: auto;
                    justify-content: flex-end;
                }
            }
        }
        .ad-form{
            margin-top: 30rpx;
            .form-title{
                width: 100%;
                height: 100rpx;
                margin: 10rpx 0;
                padding: auto;
                display: flex;
                background-color: #ffffff;
                span{
                    margin: auto 20rpx;
                }
                p{
                    margin: auto;
                    margin-left: 0;
                }
            }
        }
		.myset-btn{
				width: 85%;
				height: 50px;
				line-height: 100rpx;
				text-align: center;
				background-color: rgb(224, 7, 36);
				margin: 80rpx auto 0;
				// margin-top: 150px;
				border-radius: 40rpx;
				color:#fff;
			}
    }
    

</style>
